<!-- 专题卡片 -->
<template>
  <div class="topicCard" @click="toDetail(cardData.objectId)">
    <div class="cardBanner">
      <img
        class="cardImg"
        :src="$getImageUrl(cardData.originImg)"
        alt=""
        srcset=""
      />
      <div class="cardTag">
        <!-- <img src="@/assets/course-union.png" alt="" /> -->
        <svg
          width="14"
          height="15"
          viewBox="0 0 14 15"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M5 2C4.72386 2 4.5 2.22386 4.5 2.5C4.5 2.77614 4.72386 3 5 3H10.5C11.0523 3 11.5 3.44772 11.5 4V9.5C11.5 9.77614 11.7239 10 12 10C12.2761 10 12.5 9.77614 12.5 9.5V4C12.5 2.89543 11.6046 2 10.5 2H5ZM2 4C1.72386 4 1.5 4.22386 1.5 4.5V12.5C1.5 12.7761 1.72386 13 2 13H10C10.2761 13 10.5 12.7761 10.5 12.5V4.5C10.5 4.22386 10.2761 4 10 4H2Z"
            fill="white"
          />
        </svg>

        <span v-if="cardData.courses">{{ cardData.courses.length }}</span>
        <span v-else>0</span>
        项课程
      </div>
    </div>
    <div class="cardInfo">
      <div class="cardTitle moreHidden">
        {{ cardData.name }}
      </div>
      <div class="cardCourse">
        <div class="cardCourse-list">
          <div
            class="courseItem"
            v-for="(item, index) in cardData.courses"
            :key="index"
            @click.stop="handleCourse(item)"
          >
            <img src="@/assets/play-icon-hover.png" alt="" />
            <!-- <svg
              width="14"
              height="14"
              viewBox="0 0 14 14"
              class="union-hover"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.2915 12.25C10.191 12.25 12.5415 9.8995 12.5415 7C12.5415 4.1005 10.191 1.75 7.2915 1.75C4.39201 1.75 2.0415 4.1005 2.0415 7C2.0415 9.8995 4.39201 12.25 7.2915 12.25ZM8.90446 7.25725L6.45423 8.72739C6.25427 8.84737 5.99988 8.70333 5.99988 8.47014V5.52986C5.99988 5.29667 6.25427 5.15264 6.45423 5.27261L8.90446 6.74275C9.09867 6.85927 9.09867 7.14073 8.90446 7.25725Z"
                fill="#3E3E3E"
              />
            </svg> -->

            <div class="courseTitle">{{ item.name }}</div>
          </div>
        </div>
        <!-- <div class="cardCourse-more" v-if="courseList.length > 3">...</div> -->
      </div>
      <div class="cardOther">
        <div class="lecturer">
          <img
            class="calendarIcon"
            src="@/assets/calendar-icon.png"
            alt=""
            srcset=""
          />
          {{ cardData.updateTime || "无" }}
        </div>
        <div class="booking">
          <!-- <img src="@/assets/users.png" alt="" /> -->
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M3.14458 4.02871C3.14458 3.09382 3.90246 2.33594 4.83735 2.33594C5.77224 2.33594 6.53012 3.09382 6.53012 4.02871C6.53012 4.9636 5.77224 5.72148 4.83735 5.72148C3.90246 5.72148 3.14458 4.9636 3.14458 4.02871ZM4.83735 1.33594C3.35017 1.33594 2.14458 2.54153 2.14458 4.02871C2.14458 5.51588 3.35017 6.72148 4.83735 6.72148C6.32453 6.72148 7.53012 5.51588 7.53012 4.02871C7.53012 2.54153 6.32453 1.33594 4.83735 1.33594ZM8.67466 1.33594C8.39852 1.33594 8.17466 1.5598 8.17466 1.83594C8.17466 2.11208 8.39852 2.33594 8.67466 2.33594C9.60955 2.33594 10.3674 3.09382 10.3674 4.02871C10.3674 4.9636 9.60955 5.72148 8.67466 5.72148C8.39852 5.72148 8.17466 5.94534 8.17466 6.22148C8.17466 6.49762 8.39852 6.72148 8.67466 6.72148C10.1618 6.72148 11.3674 5.51588 11.3674 4.02871C11.3674 2.54153 10.1618 1.33594 8.67466 1.33594ZM0.5 11.045C0.5 8.95232 2.19646 7.25586 4.28916 7.25586H5.38554C7.47823 7.25586 9.1747 8.95232 9.1747 11.045C9.1747 11.9267 8.45997 12.6414 7.57831 12.6414H2.09639C1.21473 12.6414 0.5 11.9267 0.5 11.045ZM4.28916 8.25586C2.74875 8.25586 1.5 9.50461 1.5 11.045C1.5 11.3744 1.76701 11.6414 2.09639 11.6414H7.57831C7.90769 11.6414 8.1747 11.3744 8.1747 11.045C8.1747 9.50461 6.92595 8.25586 5.38554 8.25586H4.28916ZM9.6615 7.25586C9.38536 7.25586 9.1615 7.47972 9.1615 7.75586C9.1615 8.032 9.38536 8.25586 9.6615 8.25586H9.77114C11.3115 8.25586 12.5603 9.50461 12.5603 11.045C12.5603 11.3744 12.2933 11.6414 11.9639 11.6414H9.77114C9.49499 11.6414 9.27114 11.8653 9.27114 12.1414C9.27114 12.4175 9.49499 12.6414 9.77114 12.6414H11.9639C12.8456 12.6414 13.5603 11.9267 13.5603 11.045C13.5603 8.95232 11.8638 7.25586 9.77114 7.25586H9.6615Z"
              fill="#8C8C8C"
            />
          </svg>

          {{ cardData.joins || 0 }}人学习
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopicCard",
  props: {
    cardData: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      courseList: [], // 列表
    };
  },

  methods: {
    // 跳转详情
    toDetail(objectId) {
      let params = {
        objectId: objectId,
      };
      const url = this.$router.resolve({
        path: "/topic/detail",
        query: params,
      }).href;
      window.open(url, "_blank");
    },

    // 跳转课程
    handleCourse(val) {
      let params = {
        id: val.objectId,
      };
      const url = this.$router.resolve({
        path: "/courseDetails",
        query: params,
      }).href;
      window.open(url, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.topicCard {
  box-sizing: border-box;
  width: 676px;
  height: 228px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0 16px 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: $box-shadow;
  cursor: pointer;
  .cardBanner {
    position: relative;
    width: 326px !important;
    height: 196px;
    margin-right: 16px;
    .cardImg {
      width: 326px;
      // width: 373px;
      height: 196px;
    }
    .cardTag {
      color: #fff;
      padding: 4px 6px;
      border-radius: 2px 0px 0px 0px;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      line-height: 16.8px;

      // img {
      //   width: 14px;
      //   margin-right: 2px;
      // }
    }
  }

  .cardInfo {
    box-sizing: border-box;
    width: 302px;
    height: 196px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .cardTitle {
      width: 100%;
      height: 42px;
      font-size: 14px;
      font-weight: 600;
      line-height: 21px;
      margin-bottom: 12px;
      color: $text-title-color;
      -webkit-line-clamp: 2;
    }
    .cardCourse {
      width: 100%;
      height: 120px;
      font-size: 12px;
      color: $text-color;
      @include ellipsis2(2);

      &-list {
        width: 100%;
        height: 100px;
        overflow: hidden;
        .courseItem {
          width: 100%;
          height: 18px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 8px;
          cursor: pointer;
          img {
            width: 14px;
            margin-right: 4px;
            filter: brightness(0%);
          }
          .courseTitle {
            width: 100%;
            height: 18px;
            line-height: 18px;
            @include ellipsis;
          }
        }

        .courseItem:hover img {
          filter: grayscale(0%) brightness(100%);
        }
        .courseItem:hover {
          color: $text-color-primary;
        }

         .courseItem:hover .union-hover{
          fill: blue;
          color: $text-color-primary;
           filter: grayscale(0%) brightness(100%);
        }
      }
      &-more {
        padding-left: 20px;
      }
    }
    .cardOther {
      width: 100%;
      height: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: $text-color-secondary;
      .lecturer {
        font-size: 12px;
        font-weight: 400;
        height: 18px;
        display: flex;
        align-items: center;

        .calendarIcon {
          width: 12px;
          height: 12px;
          margin-left: 2px;
          margin-right: 6px;
        }
      }

      .booking {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          margin-right: 2px;
        }
        svg {
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
